import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  NavLink,
  Route,
  Switch,
} from 'react-router-dom'
import Home from './components/Home'
import Comment from './components/Comment'
import Search from './components/Search'
import './index.css'
import Page404 from './components/Page404'
import Login from './components/Login'
import Product from './components/Product'

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <h3>我是app组件</h3>
          <ul>
            <li>
              <NavLink activeClassName="myActive" to="/home">
                首页
              </NavLink>
            </li>
            <li>
              <NavLink activeClassName="myActive" to="/comment">
                评论
              </NavLink>
            </li>
            <li>
              <NavLink activeClassName="myActive" to="/search">
                搜索
              </NavLink>
            </li>
            <li>
              <NavLink activeClassName="myActive" to="/login">
                登录
              </NavLink>
            </li>
            <li>
              <NavLink activeClassName="myActive" to="/product/2">
                产品2号
              </NavLink>
            </li>
          </ul>

          <Switch>
            <Route exact path="/" component={Home}></Route>
            <Route path="/home" component={Home}></Route>
            <Route path="/comment" component={Comment}></Route>
            <Route path="/search" component={Search}></Route>
            <Route path="/login" component={Login}></Route>
            <Route path="/product/:id" component={Product}></Route>
            <Route component={Page404}></Route>
          </Switch>
        </div>
      </Router>
    )
  }
}

export default App
